<template>
  <el-form
    ref="form"
    class="page-form"
    :class="className"
    :model="data"
    :label-width="labelWidth"
  >
    <el-form-item
      v-for="(item) in getColumns()"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :label-width="item.labelWidth || item.label ? labelWidth : '0px'"
      :class="item.className"
      :rules="item.rules"
    >
      <!-- solt -->
      <template v-if="item.type === 'slot'">
        <slot :name="item.prop" />
      </template>
      <!-- 普通输入框 -->
      <el-input
        v-if="item.type === 'input' || item.type === 'password'"
        v-model="formData[item.prop]"
        :type="item.type"
        :disabled="item.disabled"
        :placeholder="getPlaceholder(item)"
        @change="handleEvent(item)"
      />
      <!-- 文本输入框 -->
      <el-input
        v-if="item.type === 'textarea'"
        v-model.trim="formData[item.prop]"
        :type="item.type"
        :disabled="item.disabled"
        :placeholder="getPlaceholder(item)"
        :autosize="{minRows: 2, maxRows: 10}"
        @change="handleEvent(item)"
      />
      <!-- 计数器 -->
      <el-input-number
        v-if="item.type === 'inputNumber'"
        v-model="formData[item.prop]"
        size="small"
        :min="item.min"
        :max="item.max"
        @change="handleEvent(item)"
      />
      <!-- 选择框 -->
      <el-select
        v-if="item.type === 'select'"
        v-model="formData[item.prop]"
        :disabled="item.disabled"
        :clearable="item.clearable || true"
        :filterable="item.filterable || false"
        :placeholder="getPlaceholder(item)"
        @change="handleEvent(item)"
      >
        <el-option
          v-for="(childItem) in item.list"
          :key="childItem.label"
          :label="childItem.label"
          :value="childItem.val"
        />
      </el-select>
      <!-- 日期选择框 -->
      <el-date-picker
        v-if="item.type === 'date'"
        v-model="formData[item.prop]"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :type="item.dateType"
        :picker-options="item.TimePickerOptions"
        :clearable="item.clearable || true"
        :disabled="item.disabled"
        :placeholder="getPlaceholder(item)"
        @change="handleEvent(item)"
        @clear="handleEvent(item)"
      />
      <el-button
        v-if="item.type === 'search'"
        :type="item.btnType || 'primary'"
        @click="handleEvent"
      >
        {{ item.text || '搜索' }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'BasicForm',
  props: {
    columns: {
      type: Array,
      default: () => ([]),
    },
    data: {
      type: Object,
      default: () => ({}),
    },
    className: String,
    labelWidth: {
      type: [String, Number],
      default: '100px',
    },
    needSearch: Boolean,
  },
  computed: {
    formData: {
      get() {
        return this.data || {};
      },
      set(obj) {
        this.$emit('handleEvent', obj);
      },
    },
  },
  emits: [
    'handleEvent',
  ],
  methods: {
    getColumns() {
      return this.columns;
    },
    getPlaceholder(item) {
      if (item.placeholder) return item.placeholder;
      if (item.type === 'select' || item.type === 'date') {
        return '请选择';
      }
      return '请输入';
    },
    handleEvent(item) {
      if (item.needSearch) this.$emit('handleEvent', item);
    },
  },
};
</script>
